<template>
  <div class="app-container">
    <Sidebar
      :chat-history="chatHistory"
      :active-chat-id="activeChatId"
      @create-new-chat="createNewChat"
      @delete-chat="deleteChat"
    />
    <div class="main-content">
      <ChatWindow
        :messages="activeChat?.messages || []"
        :thinking-process="thinkingProcess"
        @send-message="handleSendMessage"
      />
      <div class="thinking-depth">
        <h3>深度思考过程</h3>
        <div class="thinking-process">
          <p v-for="(step, index) in thinkingProcess" :key="index">{{ step }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Sidebar from "./components/Sidebar.vue";
import ChatWindow from "./components/ChatWindow.vue";

// 对话历史管理
const chatHistory = ref([]);
const activeChatId = ref(null);
const thinkingProcess = ref([]); // 新增思考过程响应式变量

// 初始化示例数据
onMounted(() => {
  chatHistory.value = [
    {
      id: 1,
      title: "首次对话",
      timestamp: new Date().toLocaleString(),
      messages: [],
    },
  ];
  activeChatId.value = 1;
});

// 新建对话
const createNewChat = () => {
  const newChat = {
    id: Date.now(),
    title: `对话 ${chatHistory.value.length + 1}`,
    timestamp: new Date().toLocaleString(),
    messages: [],
  };
  chatHistory.value.unshift(newChat);
  activeChatId.value = newChat.id;
};

// 删除对话
const deleteChat = (chatId) => {
  chatHistory.value = chatHistory.value.filter((chat) => chat.id !== chatId);
  if (activeChatId.value === chatId) {
    activeChatId.value = chatHistory.value[0]?.id || null;
  }
};
</script>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
}

.chat-window {
  flex: 1;
  padding: 24px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.message {
  margin-bottom: 24px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ai-message {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
}

.thinking-depth h3 {
  color: #2d3339;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
}

.thinking-process {
  background: white;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e9ecef;
}

.thinking-process p {
  margin: 8px 0;
  padding: 8px;
  border-left: 3px solid #10a37f;
  background-color: #f8fffc;
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.new-chat-btn:hover {
  background: #f0f0f0;
  transition: background 0.2s ease;
}
</style>
